<template>
	<el-dialog title="注册账号" :visible.sync="dialogVisible" :before-close="handleClose" width="900px"
		:close-on-click-modal="false" class="dialog2">
		<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="200px" class="demo-ruleForm">
			<el-form-item label="登录账号" prop="username">
				<el-input v-model="dataForm.username" placeholder="账号由字母或数字组成" @input="(v)=>(dataForm.username = v.replace(/[^\a-\z\A-\Z0-9]/g, ''))"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input type="password" v-model="dataForm.password" placeholder="请输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="r_password">
				<el-input type="password" v-model="dataForm.r_password" placeholder="请再次输入密码"></el-input>
			</el-form-item>
			<div class="hr_xian"></div>
			<el-form-item label="营业执照" prop="thumb">
				<el-upload ref="upload" action :file-list="fileList" :auto-upload="false" accept="image/*"
					:on-remove="deleteFilex" :before-remove="beforeRemove"
					:on-change="(file,fileList)=>{imgChangex(file,fileList)}" :limit="1">
					<el-button size="mini" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">上传图片最大不能超过10M</div>
				</el-upload>
			</el-form-item>
			<el-form-item label="企业名称" prop="name">
				<el-input v-model="dataForm.name" placeholder="请输入企业名称"></el-input>
			</el-form-item>
			<el-form-item label="统一社会信用代码" prop="card">
				<el-input v-model="dataForm.card" placeholder="请输入统一社会信用代码"></el-input>
			</el-form-item>
			<el-form-item label="所在地区" prop="provinceId">
				<el-cascader :options="regionData" v-model="addressArr" @change="handleChange" placeholder="请选择省市区"
					style="width: 100%;"></el-cascader>
			</el-form-item>
			<el-form-item label="企业实际住所" prop="address">
				<el-input v-model="dataForm.address" placeholder="请输入企业实际住所"></el-input>
			</el-form-item>
			<el-form-item label="企业介绍" prop="content">
				<el-input type="textarea" v-model="dataForm.content"></el-input>
			</el-form-item>
			<el-form-item label="联系人" prop="contact">
				<el-input v-model="dataForm.contact" placeholder="请输入联系人"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="mobile">
				<el-input v-model="dataForm.mobile" placeholder="请输入联系电话">
					<template slot="suffix">
						<span style="color: #409EFF;cursor: pointer;" @click="sendCode">
							{{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
						</span>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="短信验证码" prop="code">
				<el-input v-model="dataForm.code" placeholder="请输入短信验证码"></el-input>
			</el-form-item>
		</el-form>
		<div class="agreement-box">
			<el-checkbox v-model="checked" style="margin-right: 10px;"></el-checkbox>
			<span class="text hui">您已阅读并同意</span>
			<span class="text blue" @click="lookInfo(1)">《用户协议》</span>
			<span class="text hui"> 和 </span>
			<span class="text blue" @click="lookInfo(2)">《隐私政策》</span>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="small">取 消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确 定</el-button>
		</span>
		
		<el-dialog :title="type==1?'用户协议':type==2?'隐私政策':type==3?'平台介绍':''" :visible.sync="dialogVisible_xx" width="640px" append-to-body>
			<div style="max-height: 500px;overflow-y: auto;">
				<div v-if="type==1" v-html="setData.agree"></div>
				<div v-if="type==2" v-html="setData.privacy"></div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible_xx=false" size="small">取 消</el-button>
			</span>
		</el-dialog>
		
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	import {
		provinceAndCityData,
		regionData,
		rovinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from "element-china-area-data"
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.dataForm.r_password !== '') {
						this.$refs.dataForm.validateField('r_password');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.dataForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				type:null,
				setData:{},
				regionData,
				TextToCode,
				dialogVisible: false,
				dialogVisible_xx:false,
				addressArr: [],
				fileList: [],
				dataForm: {
					id: '',
					username: '',
					password: '',
					r_password: '',
					thumb: '',
					name: '',
					card: '',
					address: '',
					content: '',
					contact: '',
					mobile: '',
					code: '',
					provinceId: '',
					cityId: '',
					areaId: '',
					is_cheked:1,
				},
				rules: {
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					r_password: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					card: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入企业实际住所',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入企业介绍',
						trigger: 'blur'
					}],
					contact: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入短信验证码',
						trigger: 'blur'
					}],
					thumb: [{
						required: true,
						message: '请上传营业执照',
						trigger: 'blur'
					}],
					provinceId:[{
						required: true,
						message: '请选择所在地区',
						trigger: 'change'
					}],

				},
				isSending: false,
				countdown: 0,
				checked:false,
			}
		},
		created(){
			this.setData=JSON.parse(localStorage.getItem('userSetInfo'))
		},
		methods: {
			init() {
				this.dialogVisible = true
				this.fileList = []
				this.addressArr = []
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},
			submitForm() {
				if (!this.checked) {
					return this.$message.error("请先勾选同意本平台相关的协议！")
				}
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()

						this.$http.post('/api/login/register', this.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success', //类型是成功
								duration: 2000,
								onClose: () => {
									this.handleClose()
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			handleClose() {
				this.isSending=false
				this.countdown=0
				this.dialogVisible = false
				this.fileList = []
				this.addressArr = []
				this.$refs.dataForm.resetFields();
			},
			// 地址回显
			handleChange(value) {
				if (value) {
					this.dataForm.provinceId = value[0]
					this.dataForm.cityId = value[1]
					this.dataForm.areaId = value[2]
				}
			},
			imgChangex(file, fileList) {
				if ((file.raw.size / 1024 / 1024) > 10) {
					this.$message.error('上传文件大小不能超过 10MB!');
					fileList.pop()
					return
				} else {
					this.fileList = fileList
				}
				let form = new FormData();
				fileList.forEach(file => {
					form.append("file", file.raw);
				})
				this.$loading()
				this.$http.post("/api/publics/uppic", form, {
					header: {
						"Content-Type": "multipart/form-data"
					},
				}).then((res) => {
					this.$closeLoading()
					this.$message.success(res.msg)
					// console.log(res)
					this.dataForm.thumb = res.result.img_url
					this.dataForm.name = res.result.ocr.name
					this.dataForm.card = res.result.ocr.creditcode
					this.dataForm.address = res.result.ocr.address
				}).catch(res => {
					fileList.pop()
				})
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`)
			},
			deleteFilex(file, fileList) {
				this.fileList = fileList
			},
			sendCode() {
				if (this.countdown > 0 || this.isSending) {
					return;
				}
				let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				if (!reg.test(this.dataForm.mobile)) {
					return this.$message.warning("手机号格式不正确!")
				}
				this.isSending = true;
				this.$http.post('/api/publics/getcode', {
					mobile: this.dataForm.mobile
				}).then(res => {
					this.$message.success(res.msg)
					this.isSending = false;
					this.startCountdown();
				})
			},
			startCountdown() {
				this.countdown = 60;
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			},
			lookInfo(e) {
				this.dialogVisible_xx = true
				this.type = e
			},
		}
	}
</script>
<style scoped lang="scss">
	.demo-ruleForm {
		padding-right: 150px;
	}

	.dialog2 {
		background: #666 !important;
	}
	.agreement-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	
		.text {
			font-size: 14px;
			font-family: "微软雅黑";
		}
	
		.hui {
			color: #999;
		}
	
		.blue {
			color: #409eff;
			cursor: pointer;
		}
	}
</style>